<template lang="pug">
  v-data-table( :headers="FeeFormulaDataTableDef.headers"
    v-model="selected"
    show-select
    :options.sync="options"
    :items="items"
    loading-text="数据加载中..."
    no-data-text="未找到数据"
    :server-items-length="totalItems"
    :footer-props="footerProps"
    :loading="isLoading"
  )
    template(v-slot:item.action='{ item }')
      v-btn( depressed fab dark x-small color="primary" @click="$emit('edit', item)")
        v-icon(small) mdi-square-edit-outline
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {FeeFormulaDataTableDef} from '@/store/modules/types/FeeFormula'
  import mixins from '../mixins/PaginateDataTableMixin'
  import {mapActions, mapState} from 'vuex'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    name: 'fee_formula_data_table',
    mixins: [mixins],
    computed: {
      ...mapState('feeFormula', ["feeFormulas"])
    },
    methods: {
      ...mapActions('feeFormula', {fetchData: 'list'})
    },
    data() {
      return {
        FeeFormulaDataTableDef,
      }
    }
  })
</script>
